<!--
 * 超链接组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-link text="一个普通的超链接"></pure-link>
        </app-demo-module>

        <!-- 主题 -->
        <app-demo-module title="主题">
            <view class="links">
                <pure-link text="超链接主题-内置主题" theme="primary"></pure-link>
                <pure-link text="超链接主题-内置主题" theme="success"></pure-link>
                <pure-link text="超链接主题-内置主题" theme="danger"></pure-link>
                <pure-link text="超链接主题-内置主题" theme="warning"></pure-link>
                <pure-link text="超链接主题-内置主题" theme="info"></pure-link>
                <pure-link text="超链接主题-自定义中国红主题" theme="--app-theme-china-red"></pure-link>
            </view>
        </app-demo-module>

        <!-- 下划线 -->
        <app-demo-module title="下划线">
            <pure-link text="带下划线的超链接" underline theme="primary"></pure-link>
        </app-demo-module>

        <!-- 图标 -->
        <app-demo-module title="图标">
            <pure-link text="前置图标" underline theme="success" frontIconName="__biaoqing"></pure-link>
            <app-gap size="5px"></app-gap>
            <pure-link text="后置图标" underline theme="success" afterIconName="__fenxiang"></pure-link>
            <app-gap size="5px"></app-gap>
            <pure-link text="前置加后置图标" underline theme="success" frontIconName="__zuo3" afterIconName="__you3"></pure-link>
        </app-demo-module>

        <!-- 字体加粗 -->
        <app-demo-module title="字体加粗">
            <pure-link text="字体加粗" underline bold theme="danger" frontIconName="__biaoqing"></pure-link>
            <app-gap size="5px"></app-gap>
            <pure-link text="字体加粗" underline bold theme="danger" afterIconName="__fenxiang"></pure-link>
            <app-gap size="5px"></app-gap>
            <pure-link text="字体加粗" underline bold theme="danger" frontIconName="__zuo3" afterIconName="__you3"></pure-link>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        --app-theme-china-red: #ff0000;
    }
</style>
